<template>
  <div>
    <!-- <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">门店返利</el-breadcrumb-item>
        <el-breadcrumb-item>返利政策变更</el-breadcrumb-item>
      </el-breadcrumb>

      <div>
        <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">提交</el-button>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div> -->
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">提交</el-button>
    </div>
    <!-- 返利政策变更信息 -->
    <div style="margin-top:20px" class="qup-title-box"><span class="border" /><span>返利政策变更信息</span></div>
    <el-form
      ref="refForm"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="当前卖场返利核算:" prop="shopAccounting">
            <el-input v-model="detailData.shopAccounting" disabled type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="变更后卖场返利核算:" prop="shopAccounting	">
            <el-input v-model="formData.shopAccounting" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="当前门头返利核算:" prop="dheadAccounting">
            <el-input v-model="detailData.dheadAccounting" disabled type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="变更后门头返利核算:" prop="dheadAccounting">
            <el-input v-model="formData.dheadAccounting" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="当前是否涉及月返:" prop="isMonthReturn">
            <el-select
              v-model="detailData.isMonthReturn"
              disabled
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="变更后是否涉及月返:" prop="isMonthReturn">
            <el-select
              v-model="formData.isMonthReturn"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="变更说明:" prop="changeDesc">
            <el-input v-model="formData.changeDesc" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="最早装修进场时间:" prop="actualApproachTime">
            {{ formData.actualApproachTime }}
            <!-- <el-date-picker
              v-model="formData.actualApproachTime"
              type="date"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            /> -->
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="8">
          <el-form-item label="申报类型:" prop="declareType">
            <c-dict-select
              v-model="formData.declareType"
              dict-type-code="DECLARE_TYPE"
              placeholder="请选择申报类型"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注:" prop="remark">
            <el-input v-model="formData.remark" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <!-- 变更详情 todo-->
    <!-- <el-form
      style="margin-top:20px"
      size="mini"
      label-width="150px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属门店:" prop="shopCode">
            <input-with-dialog
              v-model="shop"
              :props="{label:'name',value:'code'}"
              :config="dialogConfigShop"
              @change="handleChangeShop"
            />
          </el-form-item>
        </el-col> -->
    <!-- <el-col :span="8">
          <el-form-item label="返利申请号:" prop="applyCode">
            <input-with-dialog
              v-model="apply"
              :props="{label:'rebateApplyCode',value:'rebateApplyCode'}"
              :config="dialogConfigApply"
              @change="handleChangeApply"
            />
          </el-form-item>
        </el-col> -->
    <!-- <el-col :span="8">
          <el-form-item label="返利进度:">
            {{ detailData.schedule }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form> -->
    <base-info v-loading="dataLoading" :detail-data="detailData" />

  </div>
</template>
<script>
import baseInfo from './rebateBaseInfo.vue'
import { saveChangeRule, getDetailById } from '@/api/shopRebate'
import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'RebateChange',
  components: { baseInfo },
  mixins: [BackPageMixin],
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      saveLoading: false,
      dataLoading: false,
      apply: [],
      shop: [],
      id: '',
      formRules: {},
      detailData: {},
      formData: {
        // shopCode: '',
        // shopName: '',
        applyCode: '',
        id: '',
        beforeShopAccounting: '',
        shopAccounting: '',
        beforeDheadAccounting: '',
        dheadAccounting: '',
        beforeIsMonthReturn: '',
        isMonthReturn: '',
        changeDesc: '',
        // remark: '',
        // declareType: '',
        actualApproachTime: ''
      },
      dialogConfigShop: {
        title: '门店',
        interfacePath: `/select-service/api/v1/shop/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }]
      },
      dialogConfigApply: {
        title: '返利申请号',
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopRebate/page`,
        setting: [{ prop: 'rebateApplyCode', title: '返利申请单号' }, { prop: 'shopName', title: '门店名称' }]
      }

    }
  },
  created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.dataLoading = true
      this.formData.id = this.id
      getDetailById(this.id).then(res => {
        if (res.success === 1) {
          // this.formData.shopCode = res.data.shopCode
          // this.formData.shopName = res.data.shopName
          // this.formData.applyCode = res.data.applyCode
          // this.formData.changeDesc = res.data.changeDesc
          // this.formData.remark = res.data.remark
          this.formData.declareType = res.data.declareType
          this.formData.actualApproachTime = res.data.actualApproachTime
          this.detailData = res.data
          this.dataLoading = false
        }
      })
    }
    this.apply = [{ code: this.formData.applyCode, name: this.formData.applyCode }]
    this.shop = [{ code: this.formData.shopCode, name: this.formData.shopName }]
  },
  methods: {
    // 门店改变
    handleChangeShop(data) {
      if (data.length !== 0) {
        this.formData.shopCode = data[0].code
        this.formData.shopName = data[0].name
      } else {
        this.formData.shopCode = ''
        this.formData.shopName = ''
      }
    },
    // 返利申请单号改变
    handleChangeApply(data) {
      if (data.length !== 0) {
        this.formData.applyCode = data[0].rebateApplyCode
      } else {
        this.formData.applyCode = ''
      }
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.formData.beforeShopAccounting = this.detailData.shopAccounting
          this.formData.beforeDheadAccounting = this.detailData.dheadAccounting
          this.formData.beforeIsMonthReturn = this.detailData.isMonthReturn
          this.saveLoading = true
          this.formData.applyCode = this.detailData.rebateApplyCode
          this.formData.constCode = this.detailData.constCode
          saveChangeRule(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$store.dispatch('views/goBack')
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
